<template>
    <!--动态class的样式
        语法： :class="{类名1:条件, 类名2:条件}"
    -->
    <p :class="{str_red:bool,str_back:bool}">动态更改class的文本颜色</p>
    <p :class="classObj">使用对象的类型动态绑定</p>
    <hr>
    <h4>动态style的样式绑定</h4>
    <!-- 语法：
     :style="{样式名:表达式}"
    -->
    <p style="color:red;">没有使用动态样式</p>
    <p :style="{color:strcolor}">只更改文字颜色</p>
    <p :style="{ color: strcolor,fontSize:fontSize,'backgroundColor':bgcolor }">只更改文字颜色</p>
    <!-- 当价格大于100的时候改变颜色-->
        <div :class="{priceRed:price>100}">{{ price }}</div>

</template>

<script setup>
import { ref } from 'vue'
const bool = ref(true)
const classObj = ref({str_red:true,str_back:true})
const strcolor = ref('blue')
const fontSize = ref('20px')
const bgcolor = ref('skyblue')
const price = ref(1000)
</script>

<style scoped>
.str_red{
    color: red;
}
.str_back{
    background-color: rgb(80, 11, 207);
}
.priceRed{
    color: red;
}
</style>